<template>
  <div class="main">
    <van-swipe class="my-swipe swipeContainer" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.responseId">
        <img :src="item.adFocusPictureDetail.cover" />
      </van-swipe-item>
    </van-swipe>
    <!-- 中间导航 -->
    <div class="topNavList">
      <ul class="list">
        <li class="itemNav" v-for="(nav, index) in navList" :key="index">
          <img :src="nav.img" />
          <div>
            {{ nav.name }}
          </div>
        </li>
      </ul>
    </div>
    <!-- 喜马拉雅图 -->
    <div class="xima">
      <img src="//imagev2.xmcdn.com/group61/M0A/CD/B2/wKgMZl0W1legiUgkAACPrBBFcJ4381.png" alt="" />
    </div>

    <!-- 小编推荐 -->
    <div class="recomentContainer" v-for="(item, index) in floorList" :index="index">
      <div class="recomentTitle">{{ item.moduleInfo.displayName }}</div>
      <div v-if="item.albumBriefDetailInfos.length > 3">
        <van-row class="recomentNav" justify="space-between">
          <van-col span="8" class="recomentNavItem" v-for="(one, key) of item.albumBriefDetailInfos.slice(0, 3)"
            :key="one.id">
            <img :src="one.albumInfo.cover" />
            <div>
              {{ one.albumInfo.title }}
            </div>
          </van-col>
        </van-row>
        <ul class="moreUrlList">
          <li class="moreUrlListItem" v-for="tow in item.albumBriefDetailInfos.slice(3)" :key="tow.id">
            <div class="moreUrlListItemImg">
              <img :src="tow.albumInfo.cover" />
            </div>
            <div class="moreUrlListItemText">
              <h3 class="title">{{ tow.albumInfo.title }}</h3>
              <p class="detail">
                {{ tow.albumInfo.shortIntro }}
              </p>
              <div class="dataContainer">
                <span class="dataLeft">
                  <i></i>
                  &nbsp; 174
                </span>
                <span class="dataLeft">
                  <i></i>
                  &nbsp; 809
                </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div v-else>
        <ul class="moreUrlList">
          <li class="moreUrlListItem" v-for="tow in item.albumBriefDetailInfos" :key="tow.id">
            <div class="moreUrlListItemImg">
              <img :src="tow.albumInfo.cover" />
            </div>
            <div class="moreUrlListItemText">
              <h3 class="title">{{ tow.albumInfo.title }}</h3>
              <p class="detail">
                {{ tow.albumInfo.shortIntro }}
              </p>
              <div class="dataContainer">
                <span class="dataLeft">
                  <i></i>
                  &nbsp; 174
                </span>
                <span class="dataLeft">
                  <i></i>
                  &nbsp; 809
                </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <img class="backImg"
        src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp" />

      <img class="imgLogo"
        src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp" />
      <div class="time-user">
        <p>© 2014-2023 喜马拉雅 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'topNavDetail',
})
</script>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { getBannerListApi } from '../../../api/homeList'
import { useRouter } from 'vue-router'

// 1.请求banner
const bannerList = ref<any>([])
const getBannerList = async () => {
  const res: any = await getBannerListApi()
  // console.log(res.moduleContent.focusImages)
  bannerList.value = res.moduleContent.focusImages
}

// 2. 请求导航及楼层列表
const navList = ref<any>([])
const floorList = ref<any>([])
const floorRowList = ref<any>([])
const floorColumList = ref<any>([])

// 3.接收参数
const props = defineProps({
  nameList: Array,
  navList1: Array,
  floorList: Array,
  floorRowList: Array,
  floorColumList: Array,
})

onMounted(() => {
  getBannerList()

  navList.value = props.navList1
  floorList.value = props.floorList
  floorRowList.value = floorList.value.slice(0, 3)
  floorColumList.value = floorList.value.slice(3)
})

// 监听路由的变化，重新赋值
const router: any = useRouter()
watch(
  () => router.currentRoute.value.path,
  (toPath) => {
    const params = router.currentRoute.value.params
    if (params !== 'tuijian') {
      navList.value = props.navList1
      floorList.value = props.floorList
      floorRowList.value = floorList.value.slice(0, 3)
      floorColumList.value = floorList.value.slice(3)
    }
  },
)
</script>

<style lang="less" scoped>
.main {
  position: relative;
  top: 40px;
}

.my-swipe {
  background-color: #fff;
  margin-top: 55px;
  margin-left: -30%;
  margin-bottom: 10px;

  .van-swipe-item {
    img {
      height: 150px;
      width: 100%;
    }
  }
}

.topNavList {
  margin-top: 10px;
  height: 50px;

  .list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 308px;
    margin: 0 auto;

    .itemNav {
      img {
        width: 34px;
        height: 34px;
        display: inline-block;
        border-radius: 50%;
      }

      div {
        font-size: 12px;
        color: #666;
        text-align: center;
        height: 17px;
        line-height: 17px;
      }
    }
  }
}

.xima {
  position: relative;
  margin: 18px 0 8px 0;

  img {
    max-width: 100%;
    border: none;
    font-size: 10px;
  }
}

.recomentContainer {
  width: 100vw;

  .recomentTitle {
    font-size: 18px;
    color: #40404c;
    line-height: 25px;
    margin: 17px 0 17px 15px;
    font-weight: 700;
  }

  .recomentNav {
    // display: flex;
    margin: 0 10px;

    .recomentNavItem {
      flex: 0 0 0;

      img {
        width: 109px;
        height: 109px;
        border-radius: 10px;
      }

      div {
        font-family: PingFangSC-Regular;
        font-size: 13px;
        overflow: hidden;
        box-sizing: border-box;
        color: #333;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
      }
    }
  }

  .moreUrlList {
    margin: 5px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .moreUrlListItem {
      height: 123px;
      width: 100%;

      box-sizing: border-box;
      padding: 15px 10px 15px 0;

      .moreUrlListItemImg {
        width: 105px;
        height: 100%;
        margin-right: 10px;
        float: left;

        img {
          border-radius: 4px;
          width: 100%;
          height: 100%;
        }
      }

      .moreUrlListItemText {
        overflow: hidden;

        h3 {
          margin: 0;
          font-size: 16px;
          line-height: 1.38;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .detail {
          height: 34px;
          margin: 5px 0 7px;
          font-size: 13px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
        }
      }

      .dataContainer {
        font-size: 11px;
        line-height: 1.45;
        white-space: nowrap;

        span {
          display: inline-block;

          i {
            font-style: normal;
            vertical-align: baseline;
            -webkit-font-smoothing: antialiased;
          }
        }
      }
    }
  }
}

.footer {
  border-top: 0.5px solid #fff;
  max-width: 640px px;
  min-width: 320px;
  margin: auto;
  height: 180px;
  width: 100%;
  text-align: center;
  position: relative;

  .backImg {
    position: absolute;
    top: 0;
    left: 0;
    height: 180px;
    width: 100%;
    z-index: -1;
  }

  .imgLogo {
    width: 102px;
    height: 36px;
    margin: 34px auto 0;
  }

  .time-user {
    padding-bottom: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFangSC;
    font-weight: 400;
    color: gray;
    line-height: 16px;
    text-align: center;
    margin-top: 15px;
  }
}
</style>
